<script setup defer async lang="ts">
import { useI18n } from 'vue-i18n'
import { ref, reactive, onMounted } from 'vue'
import { useUserInfo } from '@/store/user'
import { logout } from '@/api/login'
import { pointsInfo,getHomeAnnouncement ,platformConfig} from '@/api/user'

const { userInfos } = useUserInfo()
const { t } = useI18n()
const iframeTopValue = ref('0px')
const iframeHeghtValue = ref('0px')
import { convertNumbers } from '@/utils/utils'

const country=ref(1);
	const exchangeRate=ref(1);
	const symbol = ref('$')

const pagedata = reactive({
  todayPoints: 0,
  totalPoints: 0,
  yesterdayPoints: 0,
  showLoginOut: false,
  aircraftUrl: uni.getStorageSync('aircraftUrl'),
  pagelist: [
    'index/index',
    'scan/index',
    'user/index',
    'withdraw/index',
	'index/invite/invite',
    'user/leaderBoard/index',
    'login/index',
    'user/revenue/revenue',
    'user/withdreawalInfo/withdreawalInfo',
    'user/message/message',
    'user/changPassword/changPassword',
    'user/level/level',
    'user/whatsApp/index',
  ],
})
const pageIndex = ref(3)
const changPage = (e: any) => {
  uni.navigateTo({
    url: '/pages/' + pagedata.pagelist[e],
  })
}
const changMainPage = (e: any) => {
  
  uni.navigateTo({
    url: '/pages/' + pagedata.pagelist[e],
  })
}
const loginOut = async () => {
  const res = await logout()
  if (res.code == 0) {
    useUserInfo().reset()
	changPage(6)
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
  }
}
const  inviteText=ref("")
const decodeHtmlString = (str: string) => {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = str;
  let decoded = textarea.value;

  decoded = decoded.replace(/\\"/g, '"');
  decoded = decoded.replace(/<\/?[^>]+(>|$)/g, ""); 

  return decoded;
};
const codeUrl=ref("");
const initPage = async () => {
  try {
    const res = await pointsInfo({})
    if (res.code == 0) {
      pagedata.yesterdayPoints = res.data.yesterdayPoints
      pagedata.totalPoints = res.data.totalPoints
      pagedata.todayPoints = res.data.todayPoints
      uni.setStorageSync('totalPoints', pagedata.totalPoints)
    }
	const rep = await getHomeAnnouncement({
	 type: 6,
	})
	if (rep.code == 0) {
	 inviteText.value = decodeHtmlString(rep.data.content)
	}
	const repPlat = await platformConfig();
	if(repPlat.code==0){
		codeUrl.value="https://"+repPlat.data.host+'/pages/login/register?promo_code=' + uni.getStorageSync('userInfo')?.User.code
	}
  } catch (error) {
    console.error(':', error)
  }
}
const handleShareApp = () => {
  let url = ''

      url = `https://t.me/share/url?url=${encodeURIComponent(codeUrl.value)}&text=${encodeURIComponent(
       inviteText.value
      )}`

  window.open(url, '_blank')
}
const copyID=()=>{
	uni.setClipboardData({
	  data: ` ${userInfos.User?.id}`, 
	  success() {
	    uni.showToast({
	      title: `${t('Copied to clipboard')}!`,
	      icon: 'none',
	      duration: 2000,
	    })
	  },
	})
}
onMounted(() => {
  
  uni.setNavigationBarTitle({
    title: 'Studio ' + t('Earn money so easy') + '!', 
  })
  
  symbol.value = uni.getStorageSync('symbol') || '₹'; 
  		country.value=uni.getStorageSync('country') || 1;
  		exchangeRate.value=uni.getStorageSync('exchangeRate') || 1;

  iframeTopValue.value = window.parent?.screenTop + 'px'
  iframeHeghtValue.value = window.parent?.innerHeight - 50 + 'px'
  
  initPage()
})

</script>

<template>
  <view class="user-page-container">
    <!-- 顶部蓝色头部区域 -->
    <view class="header-section">
      <view class="header-content">
        <view class="user-info">
          <view class="user-avatar">
            <text class="avatar-text">hi</text>
          </view>
          <view class="user-details">
            <text class="username">{{ userInfos.User?.email }}</text>
            <text class="user-id">ID: {{ userInfos.User?.id }}</text>
            <view class="action-buttons">
              <view class="action-btn" @click="copyID">
                <text class="btn-text">{{t('Copy')}}</text>
              </view>
              <view class="action-btn points-btn">
                <text class="btn-text">{{symbol}}{{ convertNumbers(pagedata.totalPoints,exchangeRate) }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="settings-btn">
          <text class="settings-text">{{t('Settings')}}</text>
        </view>
      </view>
    </view>

    <!-- 积分会员卡片 -->
    <view class="member-card">
      <view class="member-info">
        <text class="member-title">{{t('Points Member')}}</text>
        <text class="member-desc">{{t('InviteCode')}}: {{ userInfos.User?.code }}</text>
      </view>
      <view class="member-btn">
        <text class="btn-text">{{t('Learn More')}}</text>
      </view>
    </view>

    <!-- 邀请好友区域 -->
    <view class="invite-section">
      <view class="invite-card left-card" @click="handleShareApp">
        <view class="card-content">
          <view class="card-info">
            <text class="card-title">{{t('Invite Friends')}}</text>
            <text class="card-desc">{{t('Invite friends to earn more')}}</text>
            <view class="card-btn">
              <text class="btn-text">{{t('Learn More')}}</text>
              <text class="arrow">></text>
            </view>
          </view>
          <view class="card-illustration">
            <img src="@/static/img/customer.png" class="illustration-img"/>
          </view>
        </view>
      </view>
      
      <view class="invite-card right-card" @click="changPage(4)">
        <view class="card-content">
          <view class="card-info">
            <text class="card-title">{{t('Studio X')}}</text>
            <text class="card-desc">{{t('View telegram EarnClub')}}</text>
            <view class="card-btn">
              <text class="btn-text">{{t('Learn More')}}</text>
              <text class="arrow">></text>
            </view>
          </view>
          <view class="card-illustration">
            <img src="@/static/img/customer.png" class="illustration-img"/>
          </view>
        </view>
      </view>
    </view>

    <!-- 我的统计区域 -->
    <view class="stats-section">
      <text class="stats-title">{{t('My Statistics')}}</text>
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-number">{{symbol}}{{ convertNumbers(pagedata.totalPoints,exchangeRate) }}</text>
          <text class="stat-label">{{t('Account balance')}}</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{symbol}}{{convertNumbers(pagedata.todayPoints,exchangeRate)}}</text>
          <text class="stat-label">{{ t("Today's commission") }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{symbol}}{{convertNumbers(pagedata.yesterdayPoints,exchangeRate)}}</text>
          <text class="stat-label">{{ t("Yesterday's commission") }}</text>
        </view>
       <!-- <view class="stat-item">
          <text class="stat-number">6</text>
          <text class="stat-label">{{t('Menu Items')}}</text>
        </view> -->
      </view>
    </view>

    <!-- 功能菜单区域 -->
    <view class="menu-section">
      <view class="menu-grid">
        <view class="menu-card" @click="changPage(3)">
          <view class="menu-icon withdraw-icon"></view>
          <text class="menu-text">{{t('Initiate withdrawal')}}</text>
        </view>
        <view class="menu-card" @click="changPage(8)">
          <view class="menu-icon account-icon"></view>
          <text class="menu-text">{{t('Account Details')}}</text>
        </view>
        <view class="menu-card" @click="changPage(7)">
          <view class="menu-icon revenue-icon"></view>
          <text class="menu-text">{{t('Revenue record')}}</text>
        </view>
        <view class="menu-card" @click="changPage(12)">
          <view class="menu-icon withdrawal-icon"></view>
          <text class="menu-text">{{t('Bind WhatsApp')}}</text>
        </view>
        <view class="menu-card" @click="changPage(10)">
          <view class="menu-icon password-icon"></view>
          <text class="menu-text">{{t('Modify password')}}</text>
        </view>
        <view class="menu-card" @click="pagedata.showLoginOut = true">
          <view class="menu-icon logout-icon"></view>
          <text class="menu-text">{{t('Log out')}}</text>
        </view>
      </view>
    </view>

    
    <view class="bottom-nav">
      <up-tabbar :value="pageIndex" :fixed="false" :placeholder="false" :safeAreaInsetBottom="false">
        <up-tabbar-item text="" @click="changMainPage(0)">
          <template #inactive-icon>
            <image class="nav-icon-img" src="@/static/img/tutorial.png" mode="aspectFit"></image>
			<text class="nav-text">{{t('Home')}}</text>
          </template>
        </up-tabbar-item>
        <up-tabbar-item text="" @click="changPage(1)">
          <template #inactive-icon>
            <image class="nav-icon-img" src="@/static/img/monetize.png" mode="aspectFit"></image>
			<text class="nav-text">{{t('Monetize')}}</text>
          </template>
        </up-tabbar-item>
		<up-tabbar-item text="" @click="changPage(4)">
		  <template #inactive-icon>
		    <image class="nav-icon-img" src="@/static/img/invite.png" mode="aspectFit"></image>
			<text class="nav-text">{{t('Invite')}}</text>
		  </template>
		</up-tabbar-item>
        <up-tabbar-item text="" @click="changMainPage(2)">
          <template #active-icon>
            <image class="nav-icon-img active" src="@/static/img/mine-s.png" mode="aspectFit"></image>
			<text class="nav-text-active ">{{t('Me')}}</text>
          </template>
        </up-tabbar-item>
      </up-tabbar>
    </view>

    
    <up-modal
      :show="pagedata.showLoginOut"
      @cancel="pagedata.showLoginOut = false"
      @confirm="loginOut"
      :confirmText="t('logout')"
      :cancelText="t('cancel')"
      :showCancelButton="true"
      :title="t('logout')"
      :content="t('Confirm to log out and log in')"
    ></up-modal>
  </view>
</template>

<style lang="scss" scoped>
.user-page-container {
  min-height: 100vh;
  background: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
}

// 顶部蓝色头部区域
.header-section {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  padding: 40px 20px 30px;
  color: white;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.user-avatar {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.avatar-text {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
}

.user-details {
  flex: 1;
}

.username {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 5px;
  display: block;
}

.user-id {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 15px;
  display: block;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.action-btn {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 8px 16px;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

.points-btn {
  background: rgba(255, 255, 255, 0.3);
}

.btn-text {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

.settings-btn {
  padding: 8px 16px;
  cursor: pointer;
}

.settings-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

// 积分会员卡片
.member-card {
  background: #2c3e50;
  margin: 20px;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.member-info {
  flex: 1;
}

.member-title {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 5px;
  display: block;
}

.member-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  display: block;
}

.member-btn {
  background: #ffffff;
  border-radius: 20px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background: #f0f0f0;
  }
  
  .btn-text {
    color: #2c3e50;
    font-size: 14px;
    font-weight: 600;
  }
}

// 邀请好友区域
.invite-section {
  display: flex;
  gap: 10px;
  margin: 0 20px 20px;
}

.invite-card {
  flex: 1;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }
}

.left-card {
  background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
}

.right-card {
  background: linear-gradient(135deg, #FFA500 0%, #FFD700 100%);
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 5px;
  display: block;
}

.card-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 15px;
  display: block;
}

.card-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 6px 12px;
  width: fit-content;
  backdrop-filter: blur(10px);
}

.arrow {
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
}

.card-illustration {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.illustration-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

// 统计区域
.stats-section {
  background: #ffffff;
  margin: 0 20px 20px;
  border-radius: 12px;
  padding: 20px;
}

.stats-title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 15px;
  display: block;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.stat-item {
  text-align: center;
  padding: 15px 10px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-number {
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 5px;
  display: block;
}

.stat-label {
  font-size: 12px;
  color: #666666;
  display: block;
}

// 功能菜单区域
.menu-section {
  background: #ffffff;
  margin: 0 20px 20px;
  border-radius: 12px;
  padding: 20px;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.menu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 10px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background: #e9ecef;
    transform: translateY(-2px);
  }
}

.menu-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.withdraw-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M19 7h-8v6h8V7zm-2 4h-4V9h4v2zm4-12H3C1.9 1 1 1.9 1 3v18c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 18H3V5h18v14z"/></svg>');
}

.account-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23333" viewBox="0 0 24 24"><path d="M20 7h-1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2Zm0 12H5V5h12v2h3v12ZM12 17l4-4h-3V9h-2v4H8l4 4Z"/></svg>');
}

.revenue-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>');
}

.withdrawal-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

.password-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>');
}

.logout-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>');
}

.menu-text {
  font-size: 12px;
  color: #333333;
  text-align: center;
  line-height: 1.3;
}

// 响应式设计
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .invite-section {
    flex-direction: column;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 5px;
  }
}

@media (max-width: 480px) {
  .header-section {
    padding: 30px 15px 20px;
  }
  
  .user-info {
    gap: 10px;
  }
  
  .user-avatar {
    width: 50px;
    height: 50px;
  }
  
  .username {
    font-size: 16px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .menu-card {
    padding: 15px 5px;
  }
  
  .menu-text {
    font-size: 10px;
  }
}



::v-deep .u-tabbar .u-tabbar__content{
	 background: linear-gradient(90deg,#32c66f,#007f8d)!important ;
}
::v-deep{
	.u-tabbar-item__icon{
		display: flex;
		    flex-direction: column;
		    position: relative;
		    width: 4.6875rem;
		    justify-content: space-evenly;
		    align-content: stretch;
		    align-items: center;
	}
}

</style>